<template>
  <div class="div-content">
    <hainanMap :data="middleData" :zoom="1.1" clickFunction :isZg="false" @getdata="getdata" />
    <div class="left-buttom" @click="onBottom" v-show="isBottom">
      <a-icon type="menu-unfold" />
    </div>
    <a-drawer
      placement="right"
      :closable="false"
      :visible="drawVisible"
      :get-container="false"
      :mask="false"
      :width="550"
      :zIndex="8"
      :destroyOnClose="true"
      @close="onClose"
      wrapClassName="wrapClassName"
    >
      <div class="right-title">
        <span>走私地域</span>
        <a-icon type="menu-fold" @click="onClose()" />
      </div>
      <a-row class="row-content" style="margin-top: 20px; margin-bottom: 10px">
        <a-col :span="10" style="display: flex">
          <span style="line-height: 30px">告警区域：</span>
          <a-input style="width: 60%" v-model="pageFilter.alarmArea" />
        </a-col>
        <a-col :span="10" style="display: flex">
          <span style="line-height: 30px; margin-left: 5px">告警对象：</span>
          <a-input style="width: 60%" v-model="pageFilter.alarmName" />
        </a-col>
      </a-row>
      <a-row class="row-content">
        <a-col :span="4" style="width: 14.6%">
          <span>告警时间：</span>
        </a-col>
        <a-col :span="13">
          <a-range-picker
            style="width: 100%"
            :allowClear="true"
            valueFormat="YYYY-MM-DD"
            v-model="rangePickerTime"
            @change="rangePickerChange"
          />
        </a-col>
        <a-col :span="3">
          <a-button style="margin-left: 6px" type="primary" @click="onQuery"> 查询 </a-button>
        </a-col>
        <a-col :span="3" style="margin-left: 12px">
          <a-button @click="onReset"> 重置 </a-button>
        </a-col>
      </a-row>
      <a-alert type="info" show-icon style="margin: 12px 0">
        <span slot="message">
          共 <span style="color: red">{{ pageData.total ? pageData.total : '0' }}</span> 条数据
        </span>
      </a-alert>
      <custom-table
        ref="table"
        rowKey="id"
        :showAlert="false"
        :showSelection="false"
        :loading="loading"
        :columns="columns"
        size="middle"
        :dataSource="pageData"
        :pagination="{ showSizeChanger: false }"
        @change="onTableChange"
        :customRow="clickCustomRow"
        :rowClassName="rowClassName"
      >
        <!-- <template slot="action">
          <a @click="onEdit">编辑</a>
          <a-divider type="vertical" />
          <a @click="onDelete">删除</a>
        </template> -->
        <template slot="order" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="showDetail(record)">详情</a>
        </span>
      </custom-table>
    </a-drawer>
    <a-drawer
      placement="right"
      :closable="true"
      :visible="detailVisible"
      :get-container="false"
      :mask="false"
      :width="550"
      :zIndex="9"
      :destroyOnClose="true"
      @close="onCloseDetail"
      wrapClassName="wrapClassName1"
    >
      <div class="right-title">
        <span>详情信息</span>
      </div>
      <p>
        告警对象：<span>{{ detailData.alarmName }}</span>
      </p>
      <p>
        情报名称：<span>{{ detailData.infoName }}</span>
      </p>
      <p>
        情报ID：<span>{{ detailData.infoCode }}</span>
      </p>
      <p>
        账户名称：<span>{{ detailData.userName }}</span>
      </p>
      <p>
        发布内容：<span><j-ellipsis :value="detailData.infoContent" :length="30" /></span>
      </p>
      <p>
        数据来源：<span>{{ detailData.sourceType }}</span>
      </p>
      <p>
        告警时间：<span>{{ detailData.alarmTime }}</span>
      </p>
      <p>
        关键词：<a-tag v-for="(item, index) in detailData.keywords" :key="index">
          {{ item }}
        </a-tag>
      </p>
      <p>
        提取联系方式：<span>{{
          (detailData.wechatId ? '微信—' + detailData.wechatId : '') +
          (detailData.qq ? '、QQ—' + detailData.qq : '') +
          (detailData.telephone ? '、手机号—' + detailData.telephone : '')
        }}</span>
      </p>
      <p>
        图片提取文字：<span style="margin-right: 20px" v-for="(item, key) in imgText" :key="key">{{ item }}</span>
      </p>
      <p>
        原文链接：<span>{{ detailData.sourceUrl }}</span>
      </p>
      <p>图片：</p>
      <template v-for="(item, index) in detailData.imgUrlList">
        <div class="imgItem" :key="index">
          <img :src="'data:image/png;base64,' + item.imgUrl" alt="" style="cursor: pointer" preview="1" />
        </div>
      </template>
    </a-drawer>
  </div>
</template>
<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import hainanMap from './components/hainan-map'
import * as alarmApi from '@/api/alarm.js'
import { getDictItemsFromCache } from '@/api/api'
export default {
  components: {
    CustomTable,
    hainanMap,
  },
  data() {
    return {
      drawVisible: true,
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      loading: false,
      isBottom: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`, //序号分页后连续
        },
        {
          title: '告警对象',
          dataIndex: 'alarmName',
          align: 'center',
          width: 80,
        },
        {
          title: '情报名称',
          dataIndex: 'infoName',
          align: 'center',
          width: 80,
          customRender: (text, record) => {
            return <j-ellipsis value={text} length={7} />
          },
        },
        {
          title: '数据来源',
          dataIndex: 'sourceType',
          align: 'center',
          width: 80,
        },
        {
          title: '告警区域',
          dataIndex: 'alarmArea',
          align: 'center',
          width: 80,
        },
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          align: 'center',
          width: 100,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 50,
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData: [],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      rangePickerTime: [],
      infoObj: {},
      warningEvtid: null,
      middleData: [],
      detailVisible: false,
      detailData: {},
      keywords: ['aaa', 'bbb', 'ccc'],
      imgs: [
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
        {
          fileSrc: '12121',
        },
      ],
      imgText: [],
    }
  },
  created() {
    // this.setTime();
    //查询
    this.onQuery()
    // this.drawVisible = true
  },
  async mounted() {
    this._getMiddle()
  },

  methods: {
    setTime() {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      if (month < 10) {
        month = '0' + month
      }
      let day = date.getDate() // 日
      if (day < 10) {
        day = '0' + day
      }
      let timeStr = year + '-' + month + '-' + day
      //默认查询当前日期
      this.rangePickerTime = [timeStr, timeStr]
      this.pageFilter.alarmStartTime = timeStr
      this.pageFilter.alarmEndTime = timeStr
    },
    getUrl(url) {
      // return process.env.VUE_APP_API_BASE_URL + '/swt/file/download?path=' + url
    },
    filterDictText(dictCode, text) {
      return this.$filterDictTextByCache(dictCode, text)
    },
    filterMultiDictText(dictCode, text) {
      if (!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    clickCustomRow(record, index) {
      return {
        on: {
          // 事件
          click: () => {
            this.infoObj = record
            // console.log("this.infoObj")
            // console.log(this.infoObj)
            this.warningEvtid = record.warningEvtid
            // this.getWebsite(record.websitesId)
          },
        },
      }
    },
    rowClassName(record, index) {
      let className = ''
      if (record.warningEvtid == this.warningEvtid) {
        className = 'row-active'
      }
      return className
    },
    // 选择等保对象概况时间
    rangePickerChange(date, dateString) {
      if (date.length > 0) {
        this.pageFilter.alarmStartTime = dateString[0]
        this.pageFilter.alarmEndTime = dateString[1]
      } else {
        delete this.pageFilter.alarmStartTime
        delete this.pageFilter.alarmEndTime
      }
      this.rangePickerTime = date
    },
    _getMiddle() {
      // drugUsersApi.getPersonRatioNew({ departmentId: this.departmentId }).then((res) => {
      //   if (res && res.status == 200) {
      //   }
      // })
      alarmApi
        .smuInfoWarnListDt()
        .then((res) => {
          if (res.success) {
            let data = res.result
            // let data = [
            //   {
            //     areaName: '海口市',
            //     num: 30000,
            //   },
            //   {
            //     areaName: '三亚市',
            //     num: 10000,
            //   },
            //   {
            //     areaName: '儋州市',
            //     num: 8000,
            //   },
            //   {
            //     areaName: '五指山市',
            //     num: 4000,
            //   },
            //   {
            //     areaName: '琼海市',
            //     num: 1000,
            //   },
            //   {
            //     areaName: '文昌市',
            //     num: 800,
            //   },
            //   {
            //     areaName: '万宁市',
            //     num: 500,
            //   },
            //   {
            //     areaName: '东方市',
            //     num: 20,
            //   },
            //   {
            //     areaName: '定安县',
            //     num: 2,
            //   },
            //   {
            //     areaName: '屯昌县',
            //     num: 2,
            //   },
            //   {
            //     areaName: '澄迈县',
            //     num: 1,
            //   },
            //   {
            //     areaName: '临高县',
            //     num: 1,
            //   },
            //   {
            //     areaName: '白沙黎族自治县',
            //     num: 1,
            //   },
            //   {
            //     areaName: '昌江黎族自治县',
            //     num: 1,
            //   },
            //   {
            //     areaName: '乐东黎族自治县',
            //     num: 1,
            //   },
            //   {
            //     areaName: '陵水黎族自治县',
            //     num: 1,
            //   },
            //   {
            //     areaName: '保亭黎族苗族自治县',
            //     num: 0,
            //   },
            //   {
            //     areaName: '琼中黎族苗族自治县',
            //     num: 1,
            //   },
            // ]
            let list = []
            if (data && data.length > 0) {
              for (let item of data) {
                let num = item.num ? [item.num] : [0]
                list.push({
                  name: item.areaName,
                  count: item.num ? item.num : 0, //总人数
                  value: [...num],
                })
              }
            }
            this.middleData = list
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    refreshTable() {
      // let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      alarmApi
        .smuInfoWarnlistDtPage(this.pageFilter)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onReset() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.rangePickerTime = []
      // this.setTime();
      this.refreshTable()
    },
    onTableChange(pagination, filters, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      // pagination.pageNo = pagination.currentPage;
      // this.pageFilter = pagination;
      this.refreshTable()
    },
    onBottom() {
      this.drawVisible = true
      this.isBottom = false
    },
    getdata(data) {
      this.pageFilter.alarmArea = data
      this.onQuery()
      // this.activeSelectLabel = data;
      // if (!data) return;
      // this.selectDatas.some(item => {
      //   if (item.label === data) {
      //     this.departmentId = item.key ? item.key : "";
      //     // this.reload()
      //   }
      // });
    },
    onClose(type) {
      this.drawVisible = false
      this.isBottom = true
    },
    onCloseDetail() {
      this.detailVisible = false
    },
    showDetail(record) {
      console.log('11111111')
      this.detailVisible = true
      this.queryDtById(record.id)
    },
    queryDtById(id) {
      alarmApi
        .smuInfoWarnQueryDtById({ id: id })
        .then((res) => {
          if (res.success) {
            console.log('res', res)
            this.detailData = res.result
            if (this.detailData.keywords) {
              this.detailData.keywords = this.detailData.keywords.split(',')
              console.log('this.detailData.keywords', this.detailData.keywords)
              //图片提取文字
              if (this.detailData.imgText != null) {
                this.imgText = this.detailData.imgText.split('/n')
              }
            }
          } else {
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onSelectedRow(keys) {
      this.selectedIds = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    // 获取涉诈网站截图
    getWebsite(websitesId) {
      getWebsiteScreenshotBy({ websitesId: websitesId })
        .then((res) => {
          if (res.success && res.result) {
            this.$set(this.infoObj, 'siteScreenshotUrl', res.result)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
  },
}
</script>
<style lang="less" scoped>
.div-content {
  /* height: 600px; */
  overflow: hidden;
  position: relative;
  border: 1px solid #ebedf0;
  border-radius: 2px;
  /* background-color: yellow; */
  width: 100%;
  // height: 600px;
  // height: calc(100vh - 90px - 105px);
  height: calc(100vh - 90px - 50px);
  // min-height: 800px;
  background-color: #fff;
  .right-title {
    font-weight: 600;
    font-size: 15px;
    // color: #ffffff;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    margin-bottom: 10px;
    background-color: #f2f2f2;
  }
  .right-conten-title {
    background-color: rgba(102, 101, 100, 0.6);
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 10px;
    border-left: 5px solid rgba(0, 150, 250);
  }

  .right-conten {
    margin-left: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400px;
    margin-bottom: 10px;
  }

  .row-content {
    display: flex;
    align-items: center;
    // color: #fff;
    margin-left: 10px;
  }

  .left-buttom {
    position: absolute;
    z-index: 100;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
  }
}

/deep/ .wrapClassName {
  position: absolute;
  right: 0;
  height: 100%;
  width: 20%;
  z-index: 0;
}
/deep/ .wrapClassName1 {
  position: absolute;
  right: 0;
  height: 100%;
  width: 1%;
  z-index: 1;
  p {
    padding-left: 20px;
  }
}
.imgItem {
  width: 60px;
  height: 60px;
  display: inline-block;
  // padding: 20px 0;
  margin-left: 20px;
  margin-bottom: 20px;
  // cursor: pointer;
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/deep/ .ant-drawer-body {
  padding: 0px;
}
/deep/ .ant-drawer-content {
  // background-color: rgba(255, 255, 255, 0.5);
}

// /deep/ .ant-input {
//   background-color: #00000000;
//   color: #000;
// }
// /deep/ .ant-calendar-range-picker-separator {
//   color: #000;
// }

// /deep/ .ant-table-thead > tr > th,
// .ant-table-tbody > tr > td {
//   color: #000;
//   background-color: transparent;
// }

// /deep/ .ant-table-thead {
//   background-color: rgba(255, 255, 255, 0.2);
// }

// /deep/ .ant-table-placeholder {
//   background: rgba(255, 255, 255, 0.2);
// }

// /deep/ .ant-empty-description {
//   color: #000;
// }
// /deep/.ant-table-tbody .ant-table-row td {
//   color: #000;
// }
// /deep/.ant-table-body .ant-table-row.row-active {
//   background-color: #000;
//   td {
//     color: #000 !important;
//   }
// }
// /deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
//   color: #000;
//   background-color: #fff;
// }
// /deep/ .ant-pagination-total-text {
//   color: #000;
//   /* margin-top: 20px; */
// }
// /deep/ .ant-pagination-prev,
// /deep/.ant-pagination-next,
// /deep/.ant-pagination-options,
// /deep/.ant-pagination-item {
//   margin-top: 20px;
// }
/deep/.ant-table-pagination.ant-pagination {
  padding: 0 20px;
}
// /deep/.ant-pagination-options-quick-jumper {
//   color: #000;
// }
#tooltip-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-radius: 4px;
  padding: 15px;
  color: #fff;
}
/deep/.anchorBL {
  z-index: 8 !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #000;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
</style>
<!--下面style的用处是把命名空间"v"和系统预定义的行为VML连接-->
<style>
v\:* {
  behavior: url(#default#VML);
}
</style>
